<template>
<div>
    <el-input v-model="ordername" style="width:200px;float:left" placeholder="请输入要查询的收货人名称"></el-input>
    <el-button type="primary" @click="OrderList()" style="float:left"  plain>查询</el-button>
<el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
     <el-table-column
      prop="id"
      label="订单编号"
      width="180">
      <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="creationTime"
      label="下单日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="orderInfoName"
      label="收货人名称"
      width="180">
      <template slot-scope="scope">
          <span>{{scope.row.orderInfoName}}</span>
      </template>
    </el-table-column>
   
     <el-table-column
      prop="payWayInfoId"
      label="支付方式">
      <template slot-scope="scope">
          <span>{{scope.row.payWayInfoId==1?"支付宝":"微信"}}</span>
      </template>
    </el-table-column>
     <el-table-column
      prop="shoppAddreTel"
      label="收货人电话">
    </el-table-column>
     <el-table-column
      prop="orderInfoSalePrice"
      label="订单总金额">
    </el-table-column>
     <el-table-column
      prop="commodCountPrice"
      label="商品总金额">
    </el-table-column>
     <el-table-column
      prop="orderInfoPayPrice"
      label="实付金额">
        <template slot-scope="scope">
          <span>{{scope.row.orderInfoPayPrice}}</span>
      </template>
    </el-table-column>
     <el-table-column
      prop="orderWheShipments"
      label="是否发货">
       <template slot-scope="scope">
          <span>{{scope.row.orderWheShipments==0?"未发货":"已发货"}}</span>
      </template>
    </el-table-column>
     <el-table-column
      prop="orderInfoState"
      label="订单状态"
      width="280"
      >
       <template slot-scope="scope">
          <span v-if="scope.row.orderInfoState==0" >已下单（待支付）</span>
           <span v-if="scope.row.orderInfoState==20" >已支付</span>
      </template>
    </el-table-column>
     <el-table-column
     
      label="操作">
       <template slot-scope="scope">
            <el-button type="primary" v-if="scope.row.orderInfoState==0" @click="zf(scope.row)" style="float:left"  plain>去支付</el-button>
            
             <el-button type="danger" @click="Delete(scope.row.id)">删除</el-button>
             <el-button type="primary" @click="dialogFormVisible = true,edit(scope.row.id)" style="float:left"  plain>编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div>
       

        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
              <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-col :span="17">
          <el-form-item label="收货人姓名" prop="orderInfoName">
            <el-input v-model="formData.orderInfoName" placeholder="请输入收货人姓名" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="17">
          <el-form-item label="收货人电话" prop="shoppAddreTel">
            <el-input v-model="formData.shoppAddreTel" placeholder="请输入收货人电话" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
       

      </el-form>
    </el-row>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="UpOrder(),dialogFormVisible = false">确 定</el-button>
        </div>
        </el-dialog>
  </div>
      

</div>
  
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
  export default {
  
    data() {
      return {
            dialogFormVisible: false,
          ordername:"",
        tableData: [],
             formData: {
        orderInfoName: undefined,
        shoppAddreTel: undefined,
        
        
 
      },
      rules: {
        orderInfoName: [{
          required: true,
          message: '请输入收货人姓名',
          trigger: 'blur'
        }],
        
        shoppAddreTel: [{
          required: true,
          message: '请输入收货人电话',
          trigger: 'blur'
        }],
        orderInfoSalePrice: [{
          required: true,
          message: '请输入订单总金额',
          trigger: 'blur'
        }],
        commodCountPrice: [{
          required: true,
          message: '请输入商品总金额',
          trigger: 'blur'
        }],
        payWayInfoId: [{
          required: true,
          message: '支付方式不能为空',
          trigger: 'change'
        }],
        orderInfoPayPrice: [{
          required: true,
          message: '请输入实付金额',
          trigger: 'blur'
        }],
        orderWheShipments: [{
          required: true,
          message: '是否发货不能为空',
          trigger: 'change'
        }],
      },
      payWayInfoIdOptions: [{
        "label": "支付宝",
        "value": 1
      }],
      orderWheShipmentsOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 2
      }],
        formLabelWidth: '120px'
      }
    },
    mounted(){
        this.OrderList();
    },
      methods: {
          UpOrder()
          {
              this.axios
              .post("https://localhost:44347/UpOrderMessage",this.formData)
              .then(s=>{
                  this.formData.id=localStorage.getItem('id');
                   this.formData.orderInfoName=s.data.orderInfoName;
                  
                   this.formData.shoppAddreTel=s.data.shoppAddreTel;
                      this.$notify({
                    title: '编辑成功',
                   
                    type: 'success'
                    });
                   
                     this.OrderList();

              })
             
          },
          //订单列表显示方法
          OrderList(){
              this.axios
              .get("https://localhost:44347/Theorderlist?orderInfoName="+this.ordername)
              .then(s=>{
                  this.tableData=s.data;
              })
          },
          //支付宝支付
          zf(row)
            {
                window.open("https://localhost:44347/api/app/a-li-pay/pay?Subject="+row.orderInfoName+"&outTradeNo="+row.id+"&totalAmount="+row.orderInfoPayPrice)
                .then(s=>{
                    if(s.data=="success")
                    {
                    
                    alert("付款成功")
                    
                    
                    }
                })
        },
        edit(id)
        {
            this.axios
            .get("https://localhost:44347/GetOrderMessages?id="+id)
            .then(s=>{
                this.formData=s.data;
                
                localStorage.setItem('id',s.data.id)
            })
        },
        //删除订单
        Delete(id)
        {
            this.axios
            .delete("https://localhost:44347/RemoveOrder?id="+id)
            .then(s=>{
                if(s.data==1)
                {

                            this.$notify({
                    title: '删除成功',
                   
                    type: 'success'
                    });
                   
                    
                    this.OrderList();
                }
                else
                {
                        alert("删除失败")
                            this.$notify.error({
                                title: '删除失败',
                
                        });
                }
            })
        },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
    },
  }
</script>


